import React from 'react';
import {InputItem,WhiteSpace,Button} from 'antd-mobile';
import {createForm} from 'rc-form';
import {connect} from 'dva';
import MyIcon from '../components/Base/MyIcon';
import { Link } from 'dva/router';
import styles from './LoginPageZbw.css';

class LoginPageZbw extends React.Component {
  componentDidMount() {
    const height1 = document.documentElement.scrollHeight;
    const height2 = window.innerHeight;
    document.title = "汇员帮·智百威定制版"
    if (height1 <= height2) {
      this.footer.style.marginTop = height2 - this.footer.offsetTop - 20 + 'px';
    } else {
      this.footer.style.marginTop = '50px';
    }
  }
  login = () => {
    this.props.form.validateFields((error, value) => {
      if (error) return;
      if (value.phone) {
        value.phone = value.phone.replace(/\s/ig, '');
      }
      this.props.dispatch({
        type: 'auth/login',
        payload: value,
      });
    });
  };
  render() {
    const { getFieldProps } = this.props.form;
    return(
      <div className={styles.body}>

        <div className={styles.logo}>
          <img className={styles.logoImg} src={require("../assets/hz_logo.png")} alt="" />
        </div>


        <div className="loginForm">
          <InputItem
            {...getFieldProps('phone')}
            className={styles.input}
            type="phone"
            placeholder="手机号码/用户名"
          ><MyIcon type="user" className={styles.icon} /></InputItem>
          <InputItem
            {...getFieldProps('password')}
            className={styles.input}
            type="password"
            placeholder="密码"
          ><MyIcon type="password" className={styles.icon} /></InputItem>
          <Button type="ghost" style={{ background: "rgb(0,175,206)", color: "white" }} className={styles.login} onClick={this.login} loading={this.props.loading}>登录</Button>
          <WhiteSpace />
          <div>
            <Link className={styles.findPwd} to="/findpwd">找回密码</Link>
            <a className={styles.try} href="https://h.eqxiu.com/s/8Q3WZXkv">申请试用账号</a>
          </div>
        </div>
        <div className={styles.footer} ref={el => this.footer = el}>由广州启尔智信息科技有限公司提供技术支持</div>
      </div>
    )
  }
}

export default connect((state) => {
  return {loading:state.loading.models.auth};
})(createForm()(LoginPageZbw))
